<template>
    <div>
    <!-- 导航 -->
     <el-menu


  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
        <el-menu-item v-for='(item,index) in caseInfo' :key='index' :index='index.toString()'
        >
        {{item.caseName}}
        </el-menu-item>
       
     </el-menu>
     <!-- 展示框 -->
    <div>
       <router-view name="homeOut"/>
    </div>
   
    
    </div>
</template>
<script>
import {StringUtil} from '@/util/StringUtil'

  export default {
    data() {
      return {
       
        caseInfo:StringUtil.getCaseArray(),//获取localStore数组
        html:'' , //代码展示
      
            
        
      };
    },
    methods: {
      //导航选择
      handleSelect(key, keyPath) {
        
        this.html = this.caseInfo[key].code;
      
        this.loadCode();
      
      },
      //加载code
      loadCode(){
          let code = this.html;
         this.$router.push({path:'/home/homeCode',query:{code:code}});
      }
    },
   mounted(){

      this.loadCode();
     
    },
    watch:{
      html:{
        handler:function(nowHtml,oldHtml){
          this.$router.push({path:'/home/homeCode',query:{code:nowHtml}});
          location.reload();
        }
      }
    }


   
    
  }
</script>